<template>
	<view class="page">
		<view class="withdraw_tabs">
			<u-tabs v-model="activeTab" :scroll="false" :tabs="tabs" @change="tabChange" :lineScale="2">
			</u-tabs>
		</view>
		<u-empty-state v-if="couponsForChoose.length == 0" value="暂无相关优惠订单"></u-empty-state>
		<scroll-view v-else show-scrollbar="false" scroll-y style="margin-top: 24rpx; height: calc(100vh - 150rpx);">
			<view v-for="(coupon, index) in couponsForChoose" :key="index" class="coupon-wrap"
				:style="activeTab == 2 ? 'background-image: url(https://res.jiuzhang-cloud.com/jzy-oss/upload/image/dti-hospital/ic_coupon_back_off.png);' : ''">
				<view class="coupon-value-wrap">
					<view class="coupon-value-text">￥{{ coupon.money }}</view>
					<view v-if="coupon.reachMoney > 0" class="coupon-threshold-text">满{{ coupon.reachMoney }}可用</view>
					<view v-else class="coupon-threshold-text">无门槛使用</view>
				</view>
				<view class="coupon-info-wrap">
					<view class="coupon-name">{{ coupon.name }}</view>
					<view class="coupon-type">{{ coupon.useTypeName }}</view>
					<view class="coupon-type">截止日期：{{ coupon.expireTime }}</view>
				</view>
				<view v-if="activeTab == 0" class="coupon-choose-btn" @click="chooseCoupon()">立即使用</view>
				<view v-if="activeTab == 1" class="coupon-on">
					<image src="https://res.jiuzhang-cloud.com/jzy-oss/upload/image/dti-hospital/ic_coupons_on.png"
						mode="scaleToFill" />
				</view>
				<view v-if="activeTab == 2" class="coupon-on">
					<image src="https://res.jiuzhang-cloud.com/jzy-oss/upload/image/dti-hospital/ic_coupons_off.png"
						mode="scaleToFill" />
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			tabs: ['待使用', '已使用', '已失效'],
			activeTab: 0,
			pageNo: 1,
			total: 0,
			couponsForChoose: [],
		}
	},
	onLoad(options) {
		this.getCouponsList()
	},
	onReachBottom() {
		// if (this.pageNo * 10 < this.total) {
		// 	this.pageNo++
		// 	this.getCouponsList()
		// }
	},
	methods: {
		tabChange(e) {
			this.activeTab = e
			// 重置页码和内容
			this.couponsForChoose = []
			this.pageNo = 1
			this.getCouponsList()
		},
		// 券列表
		getCouponsList() {
			this.$api.getCouponsList({
				pageNo: this.pageNo,
				pageSize: 10,
				status: this.activeTab
			}).then(e => {
				const { code, result: { records, total } } = e
				if (code == 200) {
					this.couponsForChoose.push.apply(this.couponsForChoose, records)
					this.total = total
				} else {
					uni.showToast({
						title: e.message,
						icon: 'none'
					});
				}
			})
		},
		// 使用券
		chooseCoupon() {
			this.gotoRouter('/pages-mall/medicineList/medicineList')
		},
		// 滚动加载 - 触底
		scrollLoading() {
			if (this.pageNo * 10 < this.total) {
				this.pageNo++
				this.getCouponsList()
			}
		}
	}
}
</script>

<style lang="less">
@import './coupons.less';
</style>
